<script setup defer async lang="ts">
	import { ref, reactive, onMounted, nextTick } from 'vue'
	import { API_IMG_URL } from '@/utils/apiUrl'
	import { useDraggable } from '@/utils/useDraggable'
	import {
		banner,
		taskList,
		taskBaseList,
		taskStage,
		homeAnnouncement,
		configList,
		platformConfig,
		getHomeAnnouncement,
		getInstallBookmarkInfo,
		pointsInfo,
		settleInstallBookmarkInfo,
		getWithdrawalChannel,
	} from '@/api/user'
	import { useI18n } from 'vue-i18n'
	import { getUuid, checkFirstVisit, convertNumbers, convertNumbersTwo } from '@/utils/utils'
	import SkeletonCard from '@/component/SkeletonCard.vue'
	import { useUserInfo } from '@/store/user'
	import { useRouter } from 'vue-router'

	const route = useRouter()
	const router = useRouter()
	const statIdCode = ref('')
	const promoCode = ref('')
	const pageLoading = ref(false)
	
	const userInfoStore = useUserInfo()
	const { t, locale } = useI18n()
	const imgUrl = ref(API_IMG_URL())
	
	const installCertificateShow = ref(false) 
	const lagdataIsClick = ref(false) 
	const showTips = ref(false) 
	const hasVisited = ref(uni.getStorageSync('hasVisited'))
	const rulesPopusShow = ref(false)
	
	const isChecked = ref(false)
	const iframeTopValue = ref('0px')
	const iframeHeghtValue = ref('0px')
	const switchLanguage = (lang : any) => {
		locale.value = lang 
		uni.setStorageSync('langs', lang)
		
		uni.setNavigationBarTitle({
			title: t('home'), 
		})
	}
	const symbol = ref('$')
	const lagdata = reactive({
		showselect: false,
		index: 0,
	})
	const allocationList = ref([])
	
	const rateArray = ref([])
	
	const exchangeRate = ref(1)
	const countryIsClick = ref(false) 
	const countryData = reactive({
		showselect: false,
		index: 1,
	})
	const openChooseCountry = (event) => {
		countryData.showselect = true
		countryIsClick.value = true
	}
	const setCountryClose = () => {
		countryData.showselect = false
	}
	const setCountryOpen = () => {
		countryData.showselect = true
	}
	const country = ref(1)
	const selectCountry = () => {
		if (countryData.index === 1) {
			symbol.value = '₹'
			country.value = 1
		}
		if (countryData.index === 2) {
			
			symbol.value = 'Rp'
			country.value = 2
		}
		if (countryData.index === 3) {
			
			symbol.value = '₦'
			country.value = 3
		}
		if (countryData.index === 4) {
			
			symbol.value = '৳'
			country.value = 4
		}
		if (countryData.index === 5) {
			
			symbol.value = 'Rs'
			country.value = 5
		}
		
		const foundRate = rateArray.value.find((item) => item.country === country.value)
		exchangeRate.value = foundRate ? foundRate.content : 1
		uni.setStorageSync('symbol', symbol.value)
		uni.setStorageSync('country', country.value)
		uni.setStorageSync('exchangeRate', exchangeRate.value)
		setCountryClose()
	}
	const openChooseLanguage = () => {
		lagdata.showselect = true
		lagdataIsClick.value = true
	}
	const setLanguageOpen = () => {
		lagdata.showselect = true
	}
	const setLanguageClose = () => {
		lagdata.showselect = false
	}
	const pluss = (arr : Array<any>) => {
		let count = 0
		arr.map((item : any) => {
			count = count + item.rewardUpper
		})
		return convertNumbersTwo(count, exchangeRate.value)
	}
	const plussTask = (arr : Array<any>) => {
		let count = 0
		arr.map((item : any) => {
			count = count + item.rewardLower
		})
		return convertNumbersTwo(count, exchangeRate.value)
	}

	const noticeList = (list : any[], type : number) : string[] => {
		return list.map((item : any) => {
			const rewardRange = `${convertNumbersTwo(item.rewardLower / 100, exchangeRate.value)} - ${convertNumbersTwo(
				item.rewardUpper / 100,
				exchangeRate.value,
			)}${symbol.value}`

			switch (type) {
				case 5:
					return `${t('Invite')}${item.valueCount} ${t('People')} ${rewardRange}`
				case 2:
					return `${t('Standing')}${item.valueTime / 60} M ${rewardRange}`
				default:
					return `${t('ScanCode')}${item.valueCount} ${t('Account')} ${rewardRange}`
			}
		})
	}

	const showTipsClose = () => {
		showTips.value = false
	}
	const showTipsOpen = () => {
		showTips.value = true
	}
	const goRegister = () => {
		uni.setStorageSync('hasVisited', 'true')
		let queryUrl
		if (uni.getStorageSync('code')) {
			queryUrl = `?code=${uni.getStorageSync('code')}`
		}
		if (uni.getStorageSync('code')) {
			queryUrl = `?code=${uni.getStorageSync('promo_code')}`
		}
		window.top?.postMessage(`/pages/login/index`, window.location.origin)
		uni.navigateTo({
			url: '/pages/login/register',
		})
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	}
	const languageMap = {
		0: 'hi',
		1: 'en',
		2: 'hausa',
		3: 'bn',
		4: 'tam',
		5: 'urdu',
		6: 'id',
		7: 'tel',
	}
	const selectLanguage = () => {
		if (hasVisited.value) {
			window.top?.postMessage('/pages/index/index', '*')
		}

		const languageCode = languageMap[lagdata.index]
		if (languageCode) {
			switchLanguage(languageCode)
		}
		setLanguageClose()
		if (!hasVisited.value) {
			showTipsOpen()
			rulesPopusShow.value = true
		}
	}
	
	const swiperdata = reactive({
		swiperIndx: 0,
		list: [{ jump_link: '' }],
		listdata: [],
	})
	
	const getCurrent = (data : any) => {
		let current = 0
		data.forEach((item : any) => {
			current = current + item.completed
		})
		return current
	}
	const swiperChange = (e : any) => {
		
		swiperdata.swiperIndx = e.current
	}

	const clickSwiper = (e : any) => {
		if (hasVisited.value) {
			
			const baseUrl = swiperdata.listdata[e]?.jump_link

			if (baseUrl && baseUrl.startsWith('https://')) {
				window.open(baseUrl, '_blank')
			} else {
				
				const queryParams = {
					prevPage: 'home',
				}

				
				const fullUrl = `${baseUrl}?${Object.entries(queryParams)
					.filter(([_, value]) => value)
					.map(([key, value]) => `${key}=${value}`)
					.join('&')}`
				uni.navigateTo({
					url: fullUrl,
				})
			}
		}
		if (!hasVisited.value) {
			showTipsOpen()
		}
	}
	
	const noticedata = reactive({
		list: ['new vioce', 'four news'],
	})
	
	const pagedata = reactive({
		taskStageList: {
			getNewUser: { data: [], invite: 0 },
			groupMember: { data: [], invite: 0 },
			online: { data: [], invite: 0 },
			scanCode: { data: [], invite: 0 },
		},
		taskDetail: { ChanTask: { type: 1 }, Phase: [{}] },
		showTask: false,
		timer: {},
		targetTimestamp: 1733258800000, 
		countdown: {
			days: 0,
			hours: 0,
			minutes: 0,
			seconds: 0,
		},
		totalPoints: 0,
		pagelist: new Map([
			['home', 'index/index'],
			['scan', 'scan/index'],
			['user', 'user/index'],
			['leaderBoard', 'user/leaderBoard/index'],
			['invite', 'index/invite/invite'],
			['withdraw', 'withdraw/index'],
		]),
		taskList: { ChanTask: [{ ChanTask: { type: 1 }, Phase: [{ rewardUpper: 0 }] }] },
		taskInfo: { title: '', content: '', sort_value: 0 },
		taskInfos: [],
		aircraftUrl: '',
		langlistMap: new Map([
			['hi', 0],
			['en', 1],
			['zh', 2],
			['bn', 3],
			['mala', 4],
			['mar', 5],
			['tam', 6],
			['tel', 7],
		]),
		langlistMapTest: new Map([
			['₹', 1],
			['Rp', 2],
			['₦', 3],
			['৳', 4],
			['Rs', 5],
		]),
	})

	const isAnimating = ref(false)
	const navRankList = (index : any, page : any) => {
		if (isAnimating.value) return
		isAnimating.value = true
		
		const view = document.querySelector(`.aniview${index}`)
		view.classList.add('shrink')

		
		setTimeout(() => {
			view.classList.remove('shrink')
			view.classList.add('grow')
			setTimeout(() => {
				view.classList.remove('grow')
				isAnimating.value = false
				changPage(page)
				
			}, 100) 
		}, 100) 
	}
	const showTasks = (item : any) => {
		if (!hasVisited.value) {
			showTipsOpen()
			return
		}
		pagedata.taskDetail = item
		pagedata.taskInfo = pagedata.taskInfos.filter((items : any) => item.ChanTask.type == items.task_type_order)[0]
		
		if (pagedata.taskInfo) {
			pagedata.showTask = true
		} else {
			
			uni.showToast({
				title: t('empty'),
				icon: 'none',
			})
		}
	}
	const pageIndex = ref(3)
	const changPage = (e : any) => {
		const path = pagedata.pagelist.get(e)
		if (!path) {
			return
		}
		if (hasVisited.value) {
			window.top?.postMessage(`/pages/${path}`, window.location.origin)
			uni.navigateTo({
				url: '/pages/' + path,
			})
		}
		if (!hasVisited.value) {
			showTipsOpen()
		}
	}
	const changMainPage = (e : any) => {
		if (hasVisited.value) {
			if (pagedata.timer) {
				clearInterval(pagedata.timer)
			}
			window.top?.postMessage(`/pages/${pagedata.pagelist.get(e)}`, window.location.origin)
			uni.navigateTo({
				url: '/pages/' + pagedata.pagelist.get(e),
			})
		}
		if (!hasVisited.value) {
			showTipsOpen()
		}
	}
	const decodeHtmlString = (str : string) => {
		
		str = str.replace(/^<p>|<\/p>$/g, '')

		
		const textarea = document.createElement('textarea')
		textarea.innerHTML = str
		let decoded = textarea.value

		
		decoded = decoded.replace(/\\"/g, '"')

		return decoded
	}
	const boundRulesContent = ref()
	const rateAllocation = ref(0)

	const initPage = async () => {
		try {
			pageLoading.value = true
			if (userInfoStore.token) {
				let params = {}
				if (userInfoStore.isPwa) params.from = 'bookmark'
				const pointRes = await pointsInfo(params)
				if (pointRes.code == 0) {
					uni.setStorageSync('totalPoints', pointRes.data.totalPoints)
				}
			}
			pagedata.totalPoints = uni.getStorageSync('totalPoints') || 0

			const res = await banner({})
			if (res.code == 0) {
				swiperdata.list = []
				swiperdata.listdata = res.data
				
				swiperdata.listdata.sort((a, b) => {
					return a.sort_value - b.sort_value
				})
				swiperdata.listdata.map((item : any) => swiperdata.list.push(imgUrl.value + '/' + item.image))
				
				
				
			}
			const rateReq = await configList({
				type: 1,
				fixedKey: 2,
			})
			rateAllocation.value = rateReq.data.content
			uni.setStorageSync('rateAllocation', rateAllocation.value)
			
			const req = await getWithdrawalChannel()
			allocationList.value = req.data
			rateArray.value = allocationList.value.map((item) => ({
				country: item.country,
				content: item.content.split(':')[1],
			}))
			
			const foundRate = rateArray.value.find((item) => item.country === country.value)
			exchangeRate.value = foundRate ? foundRate.content : 1
			uni.setStorageSync('exchangeRate', exchangeRate.value)
			if (!hasVisited.value) {
				const params : any = {}

				if (statIdCode.value !== '') {
					params.statId = statIdCode.value
				}
				if (promoCode.value !== '') {
					params.promo_code = promoCode.value
				}

				const ress = await taskBaseList(params)

				if (ress.code == 0) {
					pagedata.taskList = ress.data
					let arr = [[], [], [], []]
					pagedata.taskList.ChanTask.forEach((item : any, index : any) => {
						const uuid = getUuid()
						item.Phase.forEach((phaseItem, index) => {
							const uuid = getUuid()
							item.Phase[index].uuid = uuid
						})
						arr[[4, 2, 3, 5].indexOf(item.ChanTask.type)] = {
							...item,
							uuid,
						}
					})
					pagedata.taskList.ChanTask = arr
					pagedata.taskList.ChanTask = arr.filter((item) => {
						return Array.isArray(item) ? item.length > 0 : item
					})
				}
			} else {
				const ress = await taskList({})
				if (ress.code == 0) {
					pagedata.taskList = ress.data
					let arr = [[], [], [], []]
					pagedata.taskList.ChanTask.forEach((item : any, index : any) => {
						const uuid = getUuid()
						item.Phase.forEach((phaseItem, index) => {
							const uuid = getUuid()
							item.Phase[index].uuid = uuid
						})
						arr[[4, 2, 3, 5].indexOf(item.ChanTask.type)] = {
							...item,
							uuid,
						}
					})
					pagedata.taskList.ChanTask = arr
					pagedata.taskList.ChanTask = arr.filter((item) => {
						return Array.isArray(item) ? item.length > 0 : item
					})
				}
				const rep = await homeAnnouncement({ type: 1 })
				if (rep.code == 0) {
					pagedata.taskInfos = rep.data
				}

				
				const resStage = await taskStage()
				if (resStage.code == 0) {
					pagedata.taskStageList = resStage.data
				}
			}
			getInstallInfo()
			
			let showCount = uni.getStorageSync('showTips')
			if (showCount == 1) {
				rulesPopusShow.value = true
				getBounsRluesContent()
				uni.removeStorageSync('showTips')
				countryData.showselect = true
				
			}
		} finally {
			pageLoading.value = false
		}
	}

	initPage()

	
	const updateCountdown = () => {
		const now = Date.now()
		const diff = pagedata.targetTimestamp - now

		if (diff <= 0) {
			clearInterval(pagedata.timer)
			pagedata.countdown.days = 0
			pagedata.countdown.hours = 0
			pagedata.countdown.minutes = 0
			pagedata.countdown.seconds = 0
			return
		}

		pagedata.countdown.days = Math.floor(diff / (1000 * 60 * 60 * 24))
		pagedata.countdown.hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
		pagedata.countdown.minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
		pagedata.countdown.seconds = Math.floor((diff % (1000 * 60)) / 1000)
	}

	
	const startCountdown = () => {
		updateCountdown() 
		pagedata.timer = setInterval(updateCountdown, 1000)
	}

	const getAircraft = async () => {
		const reps = await platformConfig()
		if (reps.code == 0) {
			
			pagedata.aircraftUrl = 'https://t.me/' + reps.data.customer_telegram
			uni.setStorageSync('aircraftUrl', pagedata.aircraftUrl)
		}
	}

	const getBounsRluesContent = async () => {
		const reps = await getHomeAnnouncement({
			
			type: 3,
		})
		if (reps.code == 0) {
			boundRulesContent.value = decodeHtmlString(reps.data.content)
		}
	}

	const installBookmarkInfo = ref({})

	const getInstallInfo = async () => {
		const res = await configList({
			type: 2,
			fixedKey: 4,
		})
		
		if (res.code === 0) {
			installCertificateShow.value = !res.data.userId
			installBookmarkInfo.value = res.data
		}
	}
	

	const ifn = async () => {
		const res = await settleInstallBookmarkInfo()
		if (res.code === 0) {
			uni.showToast({
				title: `${t('success')}!`,
				icon: 'none',
				duration: 2000,
			})
			installCertificateShow.value = false
		}
		
		if (res.code === 0) {
			installCertificateShow.value = !!res.data.userId
		}
	}

	let deferredPrompt : any = null 
	const openUrl = () => window.open(pagedata.aircraftUrl, '_blank')
	const { dragPosition, startDrag } = useDraggable(32, openUrl)
	const installCertificate = async () => {
		console.log('Install certificate clicked')
		console.log('Deferred prompt:', userInfoStore.deferredPrompt)

		const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
		
		
		
		if (!hasVisited.value) {
			return showTipsOpen()
		}
		
		if (userInfoStore.deferredPrompt) {
			userInfoStore.deferredPrompt.prompt()
			userInfoStore.deferredPrompt.userChoice.then((choiceResult : any) => {
				if (choiceResult.outcome === 'accepted') {
					if (!isMobile) location.reload()
					console.log('User accepted the installation')
					
				} else {
					console.log('User dismissed the installation')
				}
				userInfoStore.setDeferredPrompt(null)
			})
		} else {
			console.log('No installation prompt available')
		}
	}

	const iKnowConfirm = () => {
		rulesPopusShow.value = false
	}

	
	
	

	onMounted(async () => {
		console.log('userInfoStore.deferredPrompt', userInfoStore.deferredPrompt)
		if (uni.getStorageSync('langs')) {
			const lang = uni.getStorageSync('langs') || 'en' 
			symbol.value = uni.getStorageSync('symbol') || '$' 
			country.value = uni.getStorageSync('country') || 0
			countryData.index = pagedata.langlistMapTest.get(symbol.value) ?? 0 
			lagdata.index = pagedata.langlistMap.get(lang) ?? 2 
		}

		if (route.currentRoute.value.query.code || uni.getStorageSync('code')) {
			statIdCode.value = route.currentRoute.value.query.code || uni.getStorageSync('code')
			uni.setStorageSync('code', statIdCode.value)
		}

		if (route.currentRoute.value.query.promo_code || uni.getStorageSync('promo_code')) {
			promoCode.value = route.currentRoute.value.query.promo_code || uni.getStorageSync('promo_code')
			uni.setStorageSync('promo_code', promoCode.value)
		}
		
		
		const token = uni.getStorageSync('token')
		if (route.currentRoute.value.href == '/pages/index/index' && !token) {
			uni.removeStorageSync('hasVisited')
			hasVisited.value = null
		}
		
		uni.setNavigationBarTitle({
			title: 'Studio ' + t('Earn money so easy') + '!', 
		})

		if (!hasVisited.value) {
			countryData.showselect = true
			lagdata.showselect = true
			getBounsRluesContent()
			
		} else {
			startCountdown()
			getAircraft()
		}
		uni.setStorageSync('symbol', symbol.value)
	})
</script>

<template>
	<view class="home-container">
		
		<view class="announcement-bar">
			<up-notice-bar :text="'ex2.com — please use this link / कृपया इस लिंक का उपयोग करें'" icon="volume-fill"
				bgColor="#ffffff" color="#94c720" fontSize="12px" :scrollable="true" :speed="50">
				<template #right>
					<view class="copy-button">
						<view class="copy-icon"></view>
						<text>Copy</text>
					</view>
				</template>
			</up-notice-bar>
		</view>

		
		<view class="main-banner">


			
			<view class="brand-section">
				<text class="brand-name">Mused X</text>
				<text class="brand-tagline">Mused X {{t('is that easy to make money')}}!!!</text>
			</view>

			
			<view class="user-controls">
				<view class="balance-display">
					<text class="balance-text">{{ convertNumbers(pagedata.totalPoints, exchangeRate) }}
						{{ symbol }}</text>
				</view>
				<view class="rights">
					<image class="globe-icon" src="../../static/img/lgs.png" @click="openChooseLanguage" />
					<image class="globe-icon" src="../../static/img/gj.png" @click="openChooseCountry" />
				</view>
			</view>
			<view class="swipers">
				<up-swiper :height="200" :list="swiperdata.list" @change="swiperChange" :indicator="true"
					@click="clickSwiper" :autoplay="true">
					<template #indicator>
						<view style="display: flex; flex-flow: column; width: 100%">
							<!-- <view style="width: 100%;">
                <view v-show="swiperdata.swiperIndx==0" class="custom-button" @click="navRankList(1, 'leaderBoard')">{{t('View Now')}}</view>
              </view> -->
							<view
								style="display: flex; flex-flow: row; width: 100%; justify-content: center; align-items: center">
								<view v-for="(item, index) in swiperdata.list" :key="index"
									:class="swiperdata.swiperIndx == index ? 'indicatorsuper' : 'indicators'"></view>
							</view>
						</view>
					</template>
				</up-swiper>
			</view>
			
			<view class="characters-section">

			</view>
		</view>

		
		<view class="task-cards-section">
			<view class="task-card task-card--mix" v-if="userInfoStore.deferredPrompt"  @click="installCertificate" id="installButton">
			  <view class="icon-row " >
			    <view class="card-icon newbie-icon"></view>
			    <text class="card-sub"> {{ symbol }}{{ convertNumbers(installBookmarkInfo?.content, exchangeRate) }}+</text>
			  </view>
			  <text class="card-title">{{ t('DOWNLOAD APP') }}</text>
			</view>
			<view class="task-card task-card--mix" v-else @click="changPage('scan')">
				<view class="card-icon scancode-icon"></view>
				<text class="card-title"> {{t('ScanCode Task')}}</text>
			</view>

			<view class="task-card">
				<view class="new-badge"> {{t('new')}}</view>
				<view class="card-icon lottery-icon"></view>
				<text class="card-title"> {{t('wingo lottery')}}</text>
			</view>

			<view class="task-card task-card--mix" @click="changPage('leaderBoard')">
				<view class="card-icon leaderBoard-icon"></view>
				<text class="card-title"> {{t('Ranking List')}}</text>
			</view>
		</view>

		
		<view class="task-list-section">
			<SkeletonCard v-if="pageLoading" :count="3" :container-height="'400rpx'" :step-count="5" />
			<template v-else>
				<view v-for="(item, index) in pagedata.taskList.ChanTask" :key="item.uuid" :class="'aniview' + index">
					
					<view class="card1" v-show="item.ChanTask.type == 5">
						<view class="ct" @click="navRankList(index, 'invite')">
							<view class="ctr">
								<span class="task-title">{{ t('Team Task') }}</span>
								<span class="task-subtitle">{{ pagedata.taskStageList.groupMember?.invite }}
									{{ t('People') }}</span>
							</view>
							<view class="coin-icon">{{symbol}}</view>
							<view class="earning-amount">
								 {{ pluss(item.Phase) / 100 }}+
							</view>
						</view>
						<view class="cc" @click="navRankList(index, 'invite')">
							<up-steps :current="getCurrent(pagedata.taskStageList.groupMember?.data)"
								active-color="#4CAF50">
								<up-steps-item v-for="(items, indexs) in item.Phase" :key="items.uuid">
									<template #icon>
										<view
											:class="pagedata.taskStageList.groupMember.data[indexs]?.completed == 1 ? 'stepitemsc' : 'stepitems'">
											{{ convertNumbersTwo(items.rewardUpper / 100, exchangeRate) }}{{ symbol }}
										</view>
									</template>
								</up-steps-item>
							</up-steps>
						</view>
						<view class="cb">
							<view class="cnots">
								<view class="notice-section" @click="showTasks(item)">
									<up-notice-bar  :text="noticeList(item.Phase, item.ChanTask.type)"
										direction="column" bgColor="rgb(223, 238, 254)" fontSize="0.8rem" color="#5Da7fa"
										style="border-radius: 0.6rem"></up-notice-bar>
								</view>
							</view>
						</view>
					</view>

					
					<view class="card1" v-show="item.ChanTask.type == 2">
						<view class="ct" @click="navRankList(index, 'leaderBoard')">
							<view class="ctr">
								<span class="task-title">{{ t('Standing Machine Task') }}</span>
								<span class="task-subtitle">{{ Math.floor(pagedata.taskStageList.online?.invite / 60) }}
									M</span>
							</view>
							<view class="coin-icon">{{symbol}}</view> 
							<view class="earning-amount">
								{{ pluss(item.Phase) / 100 }}+
							</view>
						</view>
						<view class="cc" @click="navRankList(index, 'leaderBoard')">
							<up-steps :current="getCurrent(pagedata.taskStageList.online?.data)" active-color="#4CAF50">
								<up-steps-item v-for="(items, indexs) in item.Phase" :key="items.uuid">
									<template #icon>
										<view
											:class="pagedata.taskStageList.online.data[indexs]?.completed == 1 ? 'stepitemsc' : 'stepitems'">
											{{ convertNumbersTwo(items.rewardUpper / 100, exchangeRate) }}{{ symbol }}
										</view>
									</template>
								</up-steps-item>
							</up-steps>
						</view>
						<view class="cb">
							<view class="cnots">
								<view class="notice-section" @click="showTasks(item)">
									<up-notice-bar  :text="noticeList(item.Phase, item.ChanTask.type)" style="border-radius:0.6rem;"
										direction="column" color="#5Da7fa" bgColor="rgb(223, 238, 254)"
										fontSize="0.8rem"></up-notice-bar>
								</view>
							</view>
						</view>
					</view>

					
					<view class="card1" v-show="item.ChanTask.type == 3">
						<view class="ct" @click="navRankList(index, 'scan')">
							<view class="ctr">
								<span class="task-title">{{ t('Scan Code Tasks') }}</span>
								<span class="task-subtitle">{{ pagedata.taskStageList.scanCode?.account }}
									{{ t('Account') }}</span>
							</view>
							<view class="coin-icon">{{symbol}}</view>
							<view class="earning-amount">
								{{ pluss(item.Phase) / 100 }}+
							</view>
						</view>
						<view class="cc" @click="navRankList(index, 'scan')">
							<up-steps :current="getCurrent(pagedata.taskStageList.scanCode?.data)"
								active-color="#4CAF50">
								<up-steps-item v-for="(items, indexs) in item.Phase" :key="items.uuid">
									<template #icon>
										<view
											:class="pagedata.taskStageList.scanCode.data[indexs]?.completed == 1 ? 'stepitemsc' : 'stepitems'">
											{{ convertNumbersTwo(items.rewardUpper / 100, exchangeRate) }}{{ symbol }}
										</view>
									</template>
								</up-steps-item>
							</up-steps>
						</view>
						<view class="cb">
							<view class="cnots">
								<view class="notice-section" @click="showTasks(item)">
									<up-notice-bar :text="noticeList(item.Phase, item.ChanTask.type)"
										direction="column" bgColor="rgb(223, 238, 254)" color="#5Da7fa"
										style="border-radius: 0.6rem" fontSize="0.8rem"></up-notice-bar>
								</view>
							</view>
						</view>
					</view>

					
					<view class="invite-task-card" v-show="item.ChanTask.type == 4">
						
						<view class="invite-header">
							<view class="invite-title">{{t('Invite Task')}}</view>
							<view class="invite-reward">
								<view class="coin-icon">{{symbol}}</view>
								<text class="reward-amount">{{ plussTask(item.Phase) / 100 }}+</text>
							</view>
						</view>
						
						
						<view class="invite-description">
							<text class="description-text">
								 {{t('Invite friends and earn up to ')}}
								<text class="highlight-amount">{{ symbol }}{{ plussTask(item.Phase) / 100 }}</text>
								! ! 
							</text>
						</view>
						
						
						<view class="invite-button-container">
							<view class="invite-button" @click="navRankList(index, 'invite')">
								<text class="button-text">{{t('Go to invite')}}</text>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
   <up-popup :show="showTips" :round="20" mode="center" @close="" type="dialog" @open="">
  <view class="tips-modal">

    
    <view class="modal-title">
      <text class="title-text">{{ t('Tips!') }}</text>
    </view>
    
    <view class="modal-content">
      <text class="content-text">
        {{ t('Please log in and start making money!') }}
      </text>
    </view>
    
    
    <view class="modal-buttons">
      <view class="earn-button" @click="goRegister">
        <text class="earn-text">{{ t('Log in now') }}</text>
      </view>
      <view class="know-button" @click="showTipsClose">
        <text class="know-text">{{ t('Look first') }}</text>
      </view>
    </view>
  </view>
</up-popup>
    <up-popup :show="rulesPopusShow" :round="20" mode="center" @close="" type="dialog" @open="">
      <view class="tips-modal">
		  
		  <view class="clock-section">
		  </view>
        <view class="modal-title">
          {{ t('Notice') }}
        </view>
        <div class="modal-content" v-html="boundRulesContent"></div>
        <!-- <view class="know">
          <checkbox 
            :value="isChecked" 
            :checked="isChecked"
            @click="handleChange"
          />
          I Know
        </view> -->
		 <view class="modal-buttons">
        <view class="earn-button" @click="changPage('scan')">
		    <text class="earn-text">{{ t('Earn money') }}</text>
        </view>
		<view class="know-button" @click="iKnowConfirm">
		  <text class="know-text">{{ t('I know') }}</text>
		</view>
		</view>
      </view>
	  
    </up-popup>
	<up-popup :show="countryData.showselect" :round="20" mode="center" @close="setCountryClose" @open="setCountryOpen">
	  <view class="country-select-modal">
	    
	    <view class="modal-header">
	      <view class="modal-title">
	        <text class="title-text">{{ t('Select Country') }}</text>
	      </view>
	    </view>
	
	    
	    <view class="country-list">
	      <view @click="countryData.index = 1" :class="countryData.index === 1 ? 'country-item selected' : 'country-item'">
	        <view class="country-flag-container">
	          <image class="country-flag" src="../../static/bank-icons/india.png" />
	        </view>
	        <view class="country-info">
	          <view class="country-name">India</view>
	          <view class="country-native">हिन्दी</view>
	        </view>
	        <view class="selection-indicator" v-if="countryData.index === 1">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>
	
	      <view @click="countryData.index = 2" :class="countryData.index === 2 ? 'country-item selected' : 'country-item'">
	        <view class="country-flag-container">
	          <image class="country-flag" src="../../static/bank-icons/indonesia.png" />
	        </view>
	        <view class="country-info">
	          <view class="country-name">Indonesia</view>
	          <view class="country-native">Indonesia</view>
	        </view>
	        <view class="selection-indicator" v-if="countryData.index === 2">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>
	
	      <view @click="countryData.index = 3" :class="countryData.index === 3 ? 'country-item selected' : 'country-item'">
	        <view class="country-flag-container">
	          <image class="country-flag" src="../../static/bank-icons/nigeria.png" />
	        </view>
	        <view class="country-info">
	          <view class="country-name">Nigeria</view>
	          <view class="country-native">Nijeriya</view>
	        </view>
	        <view class="selection-indicator" v-if="countryData.index === 3">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>
	
	      <view @click="countryData.index = 4" :class="countryData.index === 4 ? 'country-item selected' : 'country-item'">
	        <view class="country-flag-container">
	          <image class="country-flag" src="../../static/bank-icons/bangladesh.png" />
	        </view>
	        <view class="country-info">
	          <view class="country-name">Bangladesh</view>
	          <view class="country-native">বাংলাদেশ</view>
	        </view>
	        <view class="selection-indicator" v-if="countryData.index === 4">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>
	
	      <view @click="countryData.index = 5" :class="countryData.index === 5 ? 'country-item selected' : 'country-item'">
	        <view class="country-flag-container">
	          <image class="country-flag" src="../../static/bank-icons/pakistan.png" />
	        </view>
	        <view class="country-info">
	          <view class="country-name">Pakistan</view>
	          <view class="country-native">پاکستان</view>
	        </view>
	        <view class="selection-indicator" v-if="countryData.index === 5">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>
	    </view>
	
	    
	    <view class="modal-actions">
	      <view class="action-button cancel-button" @click="setCountryClose">
	        <text class="button-text">{{ t('cancel') }}</text>
	      </view>
	      <view class="action-button confirm-button" @click="selectCountry">
	        <text class="button-text">{{ t('confirm') }}</text>
	      </view>
	    </view>
	  </view>
	</up-popup>
	<up-popup :show="lagdata.showselect" :round="20" mode="center" @close="setLanguageClose" @open="setLanguageOpen">
	  <view class="language-select-modal">
	    
	    <view class="modal-header">
	      <view class="modal-title">
	        <text class="title-text">{{ t('Select you language') }}</text>
	      </view>
	    </view>

	    
	    <view class="language-list">
	      <view @click="lagdata.index = 0" :class="lagdata.index == 0 ? 'language-item selected' : 'language-item'">

	        <view class="language-info">
	          <view class="language-name">{{ t('Hindi') }}</view>
	          <view class="language-native">हिन्दी</view>
	        </view>
	        <view class="selection-indicator" v-if="lagdata.index == 0">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>

	      <view @click="lagdata.index = 1" :class="lagdata.index == 1 ? 'language-item selected' : 'language-item'">

	        <view class="language-info">
	          <view class="language-name">English</view>
	          <view class="language-native">English</view>
	        </view>
	        <view class="selection-indicator" v-if="lagdata.index == 1">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>

	      <view @click="lagdata.index = 2" :class="lagdata.index == 2 ? 'language-item selected' : 'language-item'">

	        <view class="language-info">
	          <view class="language-name">Hausa</view>
	          <view class="language-native">Hausa</view>
	        </view>
	        <view class="selection-indicator" v-if="lagdata.index == 2">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>

	      <view @click="lagdata.index = 3" :class="lagdata.index == 3 ? 'language-item selected' : 'language-item'">

	        <view class="language-info">
	          <view class="language-name">বাংলা</view>
	          <view class="language-native">Bengali</view>
	        </view>
	        <view class="selection-indicator" v-if="lagdata.index == 3">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>

	      <view @click="lagdata.index = 4" :class="lagdata.index == 4 ? 'language-item selected' : 'language-item'">

	        <view class="language-info">
	          <view class="language-name">Tamil</view>
	          <view class="language-native">தமிழ்</view>
	        </view>
	        <view class="selection-indicator" v-if="lagdata.index == 4">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>

	      <view @click="lagdata.index = 5" :class="lagdata.index == 5 ? 'language-item selected' : 'language-item'">

	        <view class="language-info">
	          <view class="language-name">اردو</view>
	          <view class="language-native">Urdu</view>
	        </view>
	        <view class="selection-indicator" v-if="lagdata.index == 5">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>

	      <view @click="lagdata.index = 6" :class="lagdata.index == 6 ? 'language-item selected' : 'language-item'">

	        <view class="language-info">
	          <view class="language-name">Indonesia</view>
	          <view class="language-native">Indonesian</view>
	        </view>
	        <view class="selection-indicator" v-if="lagdata.index == 6">
	          <text class="check-icon">✓</text>
	        </view>
	      </view>
	    </view>

	    
	    <view class="modal-actions">
	      <view class="action-button cancel-button" @click="setLanguageClose">
	        <text class="button-text">{{ t('cancel') }}</text>
	      </view>
	      <view class="action-button confirm-button" @click="selectLanguage">
	        <text class="button-text">{{ t('confirm') }}</text>
	      </view>
	    </view>
	  </view>
	</up-popup>
	<up-popup
	  :show="pagedata.showTask"
	  :mode="pagedata.taskDetail.ChanTask.type != 5 ? 'center' : 'bottom'"
	  :class="[pagedata.taskDetail.ChanTask.type != 5 ? 'custom-width-center' : 'custom-width-bottom']"
	  @close="pagedata.showTask = false"
	  :closeable="true"
	  :round="10"
	>
	  <view class="tasks" v-show="pagedata.taskDetail.ChanTask.type == 5">
	    <view class="bodys">
	      <view class="title">{{ t(pagedata.taskInfo.title) }}</view>
	      <view class="cells">
	        <rich-text :nodes="pagedata.taskInfo.content ? pagedata.taskInfo.content : '-'"></rich-text>
	      </view>
	
	      <view class="prlist" @click="changPage('leaderBoard')">{{ t('RANKING LIST') }}</view>
	    </view>
	  </view>
	  <view class="taskc" v-show="pagedata.taskDetail.ChanTask.type != 5">
	    <view class="bodys">
	      <view class="title">{{ t(pagedata.taskInfo.title) }}</view>
	      <view class="cells">
	        <rich-text :nodes="pagedata.taskInfo.content ? pagedata.taskInfo.content : '-'"></rich-text>
	      </view>
	      <view class="btns">
	        <view class="cancel" @click="pagedata.showTask = false">{{ t('cancel') }}</view>
	        <view class="sureUp" @click="changPage('scan')">{{ t('Start') }}</view>
	      </view>
	    </view>
	  </view>
	</up-popup>
		
		<view class="bottom-nav">
			<up-tabbar :value="pageIndex" :fixed="false" :placeholder="false" :safeAreaInsetBottom="false">
				<up-tabbar-item text="" @click="changMainPage('home')">
					<template #inactive-icon>
						<image class="nav-icon-img active" src="@/static/img/tutorial-s.png" mode="aspectFit"></image>
						<text class="nav-text-active">{{t('Home')}}</text>
					</template>
				</up-tabbar-item>
				<up-tabbar-item text="" @click="changPage('scan')">
					<template #inactive-icon>
						<image class="nav-icon-img" src="@/static/img/monetize.png" mode="aspectFit"></image>
						<text class="nav-text">{{t('Monetize')}}</text>
					</template>
				</up-tabbar-item>
				<up-tabbar-item text="" @click="changMainPage('invite')">
					<template #inactive-icon>
						<image class="nav-icon-img" src="@/static/img/invite.png" mode="aspectFit"></image>
						<text class="nav-text">{{t('Invite')}}</text>
					</template>
				</up-tabbar-item>
				<up-tabbar-item text="" @click="changMainPage('user')">
					<template #active-icon>
						<image class="nav-icon-img " src="@/static/img/mine.png" mode="aspectFit"></image>
						<text class=" nav-text">{{t('Me')}}</text>
					</template>
				</up-tabbar-item>
			</up-tabbar>
		</view>


	</view>
</template>

<style lang="scss" scoped>
	@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
	.home-container {
		min-height: 100vh;
		background: #ffffff;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		position: relative;
	}

	
	.announcement-bar {
		.copy-button {
			display: flex;
			align-items: center;
			background: #ffffff;
			color: #4CAF50;
			padding: 4px 12px;
			border-radius: 12px;
			font-size: 12px;
			font-weight: 600;
			gap: 4px;
			margin-left: 10px;

			.copy-icon {
				width: 12px;
				height: 12px;
				background: #4CAF50;
				border-radius: 2px;
			}
		}
	}

	
	.main-banner {
		background-image: url("@/static/img/fa15bdc4.png");
		background-size: 100% 100%;
		padding: 0px 20px;
		position: relative;
		overflow: hidden;
		min-height: 300px;


		.brand-section {
			position: relative;
			z-index: 2;

			.brand-name {
				display: block;
				font-size: 32px;
				font-weight: 900;
				color: #ffffff;
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.brand-tagline {
				display: block;
				font-size: 14px;
				color: #ffffff;
				opacity: 0.9;
				font-weight: 500;
			}
		}

		.user-controls {
			position: absolute;
			top: 5px;
			right:5px;
			display: flex;
			align-items: center;
			gap: 15px;
			z-index: 3;

			.balance-display {
				background: rgba(0, 0, 0, .22);
				padding-left: 5px;
				padding-right: 10px;
				height: 28px;
				width: auto;
				border-radius: 20px;
				display: inline-flex;
				align-items: center;

				.balance-text {
					font-size: 16px;
					font-weight: 700;
					color: #ffffff;
				}
			}

			
			  .rights {
			    display: flex;
			    align-items: center;
			    gap: 15px;
			
			    .globe-icon {
			      width: 30px;
			      height: 30px;
			    }
			  }
		}



		.characters-section {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;

		}
	}

	.swipers {
		margin: 0.5rem 0;
	}

	.indicators {
		width: 6px;
		height: 6px;
		margin: 0 0.2rem;
		animation: expandWidths 500ms forwards;
	}

	.indicatorsuper {
		width: 0.8rem;
		height: 6px;
		margin: 0 0.4rem;
		animation: expandWidth 800ms forwards;
	}

	@keyframes expandWidth {
		0% {
			border-radius: 6px;
			background: rgb(148, 199, 32);
			transform: scaleX(1);
		}

		100% {
			border-radius: 2px;
			transform: scaleX(1.6);
			background: rgb(148, 199, 32);
		}
	}

	@keyframes expandWidths {
		0% {
			border-radius: 2px;
			transform: scaleX(1.6);
			background: rgb(148, 199, 32);
		}

		100% {
			transform: scaleX(1);
			background: rgb(148, 199, 32);
			border-radius: 6px;
		}
	}


.task-cards-section {
  padding: 10px 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;

  .task-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 10px 10px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.2s ease;

    &:active {
      transform: scale(0.95);
    }

    
    .new-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      background: #ff4444;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 8px;
      transform: rotate(15deg);
    }

    
    .card-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      margin: 0 auto; 
      display: flex;
      align-items: center;
      justify-content: center;

      &.newbie-icon {
        background-image: url("@/static/img/get.png");
        background-size: 100% 100%;
      }

      &.lottery-icon {
        background: #e91e63;
      }

      &.scancode-icon {
        background-image: url("@/static/img/earn_money.png");
        background-size: 100% 100%;
      }
	  &.leaderBoard-icon {
	    background-image: url("@/static/img/wingo_icon.png");
	    background-size: 100% 100%;
	  }
    }

    
    .card-title {
      font-size: 12px;
      font-weight: 700;
      color: #333333;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 8px; 
    }
  }

  .task-card--mix {
    text-align: center; 
  
    .icon-row {
      display: flex;
      align-items: center;
      justify-content: center; 
      gap: 8px; 
      margin-bottom: 6px; 
    }
  
    .card-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background-size: 100% 100%;
    }
  
    .card-sub {
      font-size: 15px;
	  font-weight: 700;
      color: #000000;
    }
  
    .card-title {
      font-size: 14px;
      font-weight: 700;
      color: #000000;
      letter-spacing: 0.5px;
	   font-family: 'Fredoka One', Arial, sans-serif;
    }
  }

}

.invite-task-card {
	background: #ffffff;
	border-radius: 20rpx;
	
	padding: 30rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	position: relative;
	
	.invite-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.invite-title {
			font-size: 32rpx;
			font-weight: 700;
			color: #000000;
			text-transform: uppercase;
			letter-spacing: 2rpx;
			font-family: 'Fredoka One', Arial, sans-serif;
		}
		
		.invite-reward {
			display: flex;
			align-items: center;
			gap: 8rpx;
			
			.coin-icon {
				width: 40rpx;
				height: 40rpx;
				background: #FFD700;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-weight: 700;
				color: #000000;
			}
			
			.reward-amount {
				font-size: 32rpx;
				font-weight: 700;
				color: #000000;
			}
		}
	}
	
	.invite-description {
		margin-bottom: 30rpx;
		
		.description-text {
			font-size: 28rpx;
			color: #666666;
			line-height: 1.5;
			
			.highlight-amount {
				color: #4CAF50;
				font-weight: 700;
			}
		}
	}
	
	.invite-button-container {
		display: flex;
		justify-content: flex-end;
		
		.invite-button {
			background: linear-gradient(to right, #93f94e, #faf859);
			border-radius: 12rpx;
			padding:10rpx;
			box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
			.button-text {
				color: #000000;
				font-size: 28rpx;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: 1rpx;
			}
		}
	}
}


	
	.task-list-section {
		padding-top: 10px;
		padding-bottom: 40px;
		background: #ffffff;

		.card1 {
			background: #ffffff;
			border-radius: 16px;
			margin: 0 0 20px 0;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			overflow: hidden;

			.ct {
				display: flex;
				align-items: center;
				padding: 20px;

				.ctr {
					flex: 1;

					.task-title {
						display: block;
						font-size: 16px;
						font-weight: 700;
						color: #333333;
						margin-bottom: 5px;
					}

					.task-subtitle {
						display: block;
						font-size: 14px;
						color: #666666;
					}
				}
					.coin-icon {
									width: 40rpx;
									height: 40rpx;
									background: #FFD700;
									border-radius: 50%;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 24rpx;
									font-weight: 700;
									color: #000000;
								}
				.earning-amount {
					font-size: 16px;
					font-weight: 700;
				}
			}

			.cc {
				padding: 10px;

				.stepitems,
				.stepitemsc {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					font-weight: 700;
				}

				.stepitems {
					background-image: url("@/static/img/s-1.png");
					background-size: 100% 100%;
					color: #ffffff;
				}

				.stepitemsc {
					background: #4CAF50;
					border-color: #4CAF50;
					color: #ffffff;
					transform: scale(1.05);
				}
			}

			.cb {
				padding: 20px;
				background: #f8f9fa;

				.cnots {
					display: flex;
					align-items: center;
					gap: 15px;

					.notice-section {
						flex: 1;
					}

					
				}
			}
		}

		.card4 {
			background: #ffffff;
			border-radius: 16px;
			margin: 0 0 20px 0;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			overflow: hidden;

			.ct {
				display: flex;
				align-items: center;
				padding: 20px;

				image {
					width: 50px;
					height: 50px;
					border-radius: 12px;
					margin-right: 15px;
				}

				.ctr {
					flex: 1;

					.task-title {
						display: block;
						font-size: 16px;
						font-weight: 700;
						color: #333333;
						margin-bottom: 5px;
					}

					.task-subtitle {
						display: block;
						font-size: 14px;
						color: #666666;
					}
				}

				.earning-amount {
					font-size: 16px;
					font-weight: 700;
					color: #4CAF50;
					background: #E8F5E8;
					padding: 8px 12px;
					border-radius: 20px;
				}
			}
		}
	}



	
	@keyframes float {

		0%,
		100% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(-10px);
		}
	}

	::v-deep .u-tabbar .u-tabbar__content {
		background: linear-gradient(90deg, #32c66f, #007f8d) !important;
	}

	::v-deep {
		.u-tabbar-item__icon {
			display: flex;
			flex-direction: column;
			position: relative;
			width: 4.6875rem;
			justify-content: space-evenly;
			align-content: stretch;
			align-items: center;
		}
	}

	.tips-modal {
  width: 380px;
  background: linear-gradient(180deg, #E8F5E8 0%, #ffffff 100%);
  border-radius: 20px;
  padding: 0;
  position: relative;
  
  .clock-section {
        position: absolute;
        height: 141px;
        width: 141px;
        background: url('@/static/img/notice_tag.png') no-repeat center;
        background-size: 100% 100%;
        top: -93px;
        left: 50%;
        margin-left: -71px;
  }
  
  .modal-title {
    text-align: center;
    margin-bottom: 20px;
    padding: 0 20px;
    
    .title-text {
      font-size: 20px;
      font-weight: 900;
      color: #4CAF50;
      letter-spacing: 1px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
  }
  
  .modal-content {
    padding: 0 20px 20px;
    text-align: center;
    
    .content-text {
      font-size: 16px;
      color: #333333;
      line-height: 1.5;
      font-weight: 500;
    }
  }
  
  .modal-buttons {
    display: flex;
    gap: 10px;
    padding: 0 20px 20px;
    
    .earn-button {
      flex: 1;
      background: linear-gradient(to right,#93f94e,#faf859)!important;
      
      padding: 14px 20px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .earn-text {
        color: #000000;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }
    
    .know-button {
      flex: 1;
      background: #E0E0E0;
      padding: 14px 20px;
      text-align: center;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .know-text {
        color: #000000;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
    }
  }
}


@keyframes sparkle {
  0%, 100% {
    opacity: 0.8;
    transform: rotate(45deg) scale(1);
  }
  50% {
    opacity: 1;
    transform: rotate(45deg) scale(1.1);
  }
}


.country-select-modal {
  width: 360px;
  background: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
  
  .modal-header {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
    padding: 40rpx 30rpx 30rpx;
    text-align: center;
    
    .modal-title {
      .title-text {
        font-size: 36rpx;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 2rpx;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
      }
    }
  }
  
  .country-list {
    padding: 20rpx 0;
    max-height: 600rpx;
    overflow-y: auto;
    
    .country-item {
      display: flex;
      align-items: center;
      padding: 24rpx 30rpx;
      margin: 0 20rpx 8rpx;
      border-radius: 16rpx;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      
      &:hover {
        background: #f8f9fa;
        transform: translateX(8rpx);
      }
      
      &.selected {
        background: linear-gradient(135deg, #E8F5E8 0%, #F1F8E9 100%);
        border: 2rpx solid #4CAF50;
        box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
        
        .country-name {
          color: #4CAF50;
          font-weight: 700;
        }
      }
      
      .country-flag-container {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 24rpx;
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
        
        .country-flag {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .country-info {
        flex: 1;
        
        .country-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #2C3E50;
          margin-bottom: 8rpx;
          transition: color 0.3s ease;
        }
        
        .country-native {
          font-size: 24rpx;
          color: #7F8C8D;
          font-weight: 500;
        }
      }
      
      .selection-indicator {
        width: 60rpx;
        height: 60rpx;
        background: #4CAF50;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 8rpx rgba(76, 175, 80, 0.3);
        
        .check-icon {
          color: #ffffff;
          font-size: 32rpx;
          font-weight: 700;
        }
      }
    }
  }
  
  .modal-actions {
    display: flex;
    gap: 20rpx;
    padding: 30rpx;
    background: #f8f9fa;
    
    .action-button {
      flex: 1;
      padding: 24rpx 0;
      border-radius: 16rpx;
      text-align: center;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .button-text {
        font-size: 32rpx;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1rpx;
      }
      
      &.cancel-button {
        background: #E0E0E0;
        
        .button-text {
          color: #666666;
        }
        
        &:hover {
          background: #D0D0D0;
        }
      }
      
      &.confirm-button {
        background: linear-gradient(to right,#93f94e,#faf859)!important;
        box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
        
        .button-text {
          color: #000000;
          text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
        }
        
        &:hover {
          box-shadow: 0 6rpx 16rpx rgba(76, 175, 80, 0.4);
        }
      }
    }
  }
}


.country-list::-webkit-scrollbar {
  width: 8rpx;
}

.country-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4rpx;
}

.country-list::-webkit-scrollbar-thumb {
  background: #4CAF50;
  border-radius: 4rpx;
}

.country-list::-webkit-scrollbar-thumb:hover {
  background: #45a049;
}


.language-select-modal {
  width: 360px;
  background: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
  
  .modal-header {
    background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
    padding: 40rpx 30rpx 30rpx;
    text-align: center;
    
    .modal-title {
      .title-text {
        font-size: 36rpx;
        font-weight: 700;
        color: #ffffff;
        letter-spacing: 2rpx;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
      }
    }
  }

  .language-list {
    padding: 20rpx 0;
    max-height: 600rpx;
    overflow-y: auto;
    
    .language-item {
      display: flex;
      align-items: center;
      padding: 24rpx 30rpx;
      margin: 0 20rpx 8rpx;
      border-radius: 16rpx;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      
      &:hover {
        background: #f8f9fa;
        transform: translateX(8rpx);
      }
      
      &.selected {
        background: linear-gradient(135deg, #E8F5E8 0%, #F1F8E9 100%);
        border: 2rpx solid #4CAF50;
        box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
        
        .language-name {
          color: #4CAF50;
          font-weight: 700;
        }
      }
      
      .language-flag-container {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 24rpx;
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
        
        .language-flag {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      
      .language-info {
        flex: 1;
        
        .language-name {
          font-size: 32rpx;
          font-weight: 600;
          color: #2C3E50;
          margin-bottom: 8rpx;
          transition: color 0.3s ease;
        }
        
        .language-native {
          font-size: 24rpx;
          color: #7F8C8D;
          font-weight: 500;
        }
      }
      
      .selection-indicator {
        width: 60rpx;
        height: 60rpx;
        background: #4CAF50;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4rpx 8rpx rgba(76, 175, 80, 0.3);
        
        .check-icon {
          color: #ffffff;
          font-size: 32rpx;
          font-weight: 700;
        }
      }
    }
  }
  
  .modal-actions {
    display: flex;
    gap: 20rpx;
    padding: 30rpx;
    background: #f8f9fa;
    
    .action-button {
      flex: 1;
      padding: 24rpx 0;
      border-radius: 16rpx;
      text-align: center;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .button-text {
        font-size: 32rpx;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1rpx;
      }
      
      &.cancel-button {
        background: #E0E0E0;
        
        .button-text {
          color: #666666;
        }
        
        &:hover {
          background: #D0D0D0;
        }
      }
      
      &.confirm-button {
        background:linear-gradient(to right,#93f94e,#faf859)!important;
        box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
        
        .button-text {
          color: #000000;
          text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
        }
        
        &:hover {
          box-shadow: 0 6rpx 16rpx rgba(76, 175, 80, 0.4);
        }
      }
    }
  }
}


.language-list::-webkit-scrollbar {
  width: 8rpx;
}

.language-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4rpx;
}

.language-list::-webkit-scrollbar-thumb {
  background: #4CAF50;
  border-radius: 4rpx;
}

.language-list::-webkit-scrollbar-thumb:hover {
  background: #45a049;
}
::v-deep .u-steps-item__wrapper {
  width: 40px !important;
  height: 20px !important;
  border-radius: 20px !important;
}
</style>